Intercepting routes combined with parallel routes allow you to render a photo modal over the feed when navigating from the same page, while showing a dedicated photo page when accessed directly, all with proper URL synchronization
Intercepting routes in Next.js solve a classic UX challenge: showing content in a modal overlay when navigated from within the same context (like clicking a photo in a feed), while rendering that same content as a full page when accessed directly via URL (like sharing a photo link). By combining intercepting routes with parallel routes, you get both the smooth SPA experience of an overlay and the shareability/deep-linkability of a dedicated page, all without sacrificing SEO or user experience .
Intercepting routes: Use
(..)syntax to intercept route segments from a different level in the folder hierarchy, allowing you to render a different component for the same URL when navigated from within the app .Parallel routes: Named slots (
@modal) that can render independently, letting you show content in a modal while the underlying feed remains visible .default.js files: Provide fallback UI for slots during hard navigation (direct URL access) to prevent 404 errors .
The pattern requires two slots: the main content slot (implicit children) and a @modal slot. When navigating from within the app (soft navigation), the (..)photo route intercepts and renders the photo inside the @modal slot while keeping the feed in children. When accessing the photo URL directly (hard navigation), the default.js fallback for the modal slot returns null, and the children slot renders the full photo page .
The modal component should use React portals to render outside the normal DOM hierarchy, often at the end of the document body. It should include a close button and handle ESC key press to navigate back. Using useRouter to navigate back preserves the SPA experience when closing the modal .
Shareable URLs: The modal has its own URL (e.g., /photo/123) that can be copied and shared .
SEO friendly: The full photo page is server-rendered and indexable when accessed directly .
Preserved context: The feed remains in the background, so closing the modal returns to exactly where the user was .
Graceful fallback: On direct navigation, users get the full page instead of a modal with no surrounding context .
Progressive enhancement: Works without JavaScript (though modal needs JS for interactivity) .